<template>
    <div class="formdelist formdelist_a">
        <a-form-model layout="vertical" :model="config">
            <a-form-model-item :label="i18n('form.selectBpmDef','选择流程定义')">
                <rx-input-button v-model="config.bpm" :allowInput="true" @change="changeButton" @click="getBpm" @input="handInput"></rx-input-button>
                <a-checkbox class="formChenckbox" v-model="config.showName">{{i18n('form.titleDisplay','标题展示')}}</a-checkbox>
                <a-checkbox class="formChenckbox" v-model="config.fullBtn">{{customViewI18n('fullBtn','全屏按钮')}}</a-checkbox>
            </a-form-model-item>
            <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                <a-select
                    default-value="url"
                    v-model="config.receive.type"
                    :options="sourceAry"
                    :getPopupContainer="(p) => p.parentNode"
                >
                </a-select>
            </a-form-model-item>
            <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.receive.type == 'event'">
                <a-select
                    v-model="config.receive.publishComponent"
                    :options="publishComponent"
                    @change="changeComponent"
                    :getPopupContainer="(p) => p.parentNode"
                >
                </a-select>
            </a-form-model-item>
            <a-form-model-item :label="$comi18('listDef.primary', '参数映射')">
                <a-table
                    :dataSource="config.receive.mapping"
                    :pagination="false"
                    :rowSelection="receiveRowSelection"
                    rowKey="idx_"
                    :bordered="true"

                >
                    <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                        <template slot-scope="text, record">
                            {{text}}
                        </template>
                    </a-table-column>
                    <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                        <template slot-scope="text, record">
                            <a-select
                                v-model="record.valueSource"
                                :options="valueSourceDef"
                                :allowClear="true"
                                :getPopupContainer="(p) => p.parentNode"
                            >
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('list.paramValue','参数值')" dataIndex="valueDef">
                        <template slot-scope="text, record">
                            <a-select
                                v-model="record.valueDef"
                                :options="publishParams"
                                :allowClear="true"
                                :getPopupContainer="(p) => p.parentNode"
                                v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                            >
                            </a-select>
                            <a-select
                                v-model="record.valueDef"
                                :options="params"
                                :allowClear="true"
                                :getPopupContainer="(p) => p.parentNode"
                                v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                            >
                            </a-select>
                            <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                            <a-input-group v-if="record.valueSource == 'script'" compact>
                               <div style="display: flex">
                                   <a-input style="flex: 1;margin-right: 0px" v-model="record.valueDef"/>
                                   <a-button @click="openScriptQuery(record)">...</a-button>
                               </div>
                            </a-input-group>
                            <a-select
                                v-if="record.valueSource == 'constantVar'"
                                v-model="record.valueDef"
                                :options="constantField"
                                allowClear
                                :getPopupContainer="(p) => p.parentNode"
                            ></a-select>
                        </template>
                    </a-table-column>
                </a-table>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import {Dialog, GridMixin, RxInputButton, Util} from "@lowcode/jpaas-common-lib";
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import FormCustomQueryApi from "@/api/form/core/formCustomQuery";

export default {
    name: "BpmDef",
    mixins: [GridMixin, ComponentDef],
    components: {
        RxInputButton,
    },
    data() {
        return {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
            config: {
                bpm: "{value:'',text:''}",
                component: 'bpm-component',
                alias: '',
                name: '',
                showName: true,
                fullBtn: false,
                receive: {
                    //url,event
                    type: 'url',
                    component: '',
                    mapping: [{idx_: Util.randomId(), name: 'instId', valueSource: 'param', valueDef: ''}]
                },
            },
            sourceAry: [
                {value: 'url', label: this.i18n('form.incomParam','来自传入参数')},
                {value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件')},
            ],
            publishComponent: [],
            publishParams: [],
            selectedRowKeys: [],
            valueSourceDef: [
                {value: 'param', label: this.$ti18('rxForm.param','参数传入')},
                {value: 'fixedVar', label: this.$ti18('rxForm.fixedVar','固定值')},
                {value: 'script', label: this.$ti18('rxForm.script','脚本')},
                {value: 'constantVar', label: this.$ti18('rxForm.constantVar','常量')},
            ],
            constantField: [],
            alrt: 'vertical',
        }
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        init() {
            if (this.conf.receive) {
                this.config = this.conf;
                this.changeComponent(this.config.receive.publishComponent)
            }
            this.publishComponent = this.getPublishOptions()
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    zIndex:9999,
                    widthHeight: ['800px', '600px'],
                    data: {script: record.valueDef},
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        getBpm(vm){
            var self_=this;
            var config = {curVm: this, widthHeight:['950px','700px'],  data: {single:true},zIndex:99999,};
            Dialog.openBpmDefDialog(config,function (data) {
                if (!data) {
                    self_.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('msg.selectProcess','请选择一个流程!')})
                    return
                }
                vm.setVal(data.key,data.name);
                self_.config.alias = data.key
                self_.config.name = data.name;
                self_.$emit('dragclick', self_.config, self_.index, self_.type)
            })
        },
        handPublishConf(conf) {
            if (!conf) {
                return
            }
            conf = JSON.parse(conf)
            this.config.receive.mapping = conf.filter(item => {
                return item.valueSource == 'param';
            }).map((item) => {
                return {idx_: Util.randomId(), name: item.name, valueSource: item.valueSource, valueDef: item.valueDef}
            })
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        handOk() {
            if (!this.config.alias) {
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('msg.selectProcess','请选择一个流程!')})
                return;
            }
        },
        cancel() {
            Util.closeWindow(this, 'cancel')
        },
        handInput(data) {
            if (!data) {
                this.config.alias = ''
                this.config.name = ''
            }
        },
        changeButton(val){
            this.config.name = eval("(" + val + ")").text
        },
        changeComponent(val) {
            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('msg.changeComTips','发布事件组件不能选择自己!')})
                return
            }
            this.publishParams = this.getPubParams(val)
        },
    },
    watch: {}
}
</script>

<style scoped>
.formChenckbox {
    margin-top: 9px;
}

.formdelist {
    padding: 0 10px;
}

.ant-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
    padding: 0 0 2px;
}
</style>